<template>
  <div class="py-0 lg:py-5 min-w-[300px] overflow-hidden text-white">
    <div class="box-border lg:hidden mb-5 flex items-center justify-between hairline-bottom px-5 py-4">
      <h1 class="uppercase">{{ $mt('Category') }}</h1>
      <van-icon @click="handleCloseDialog" class="text-gray-light" size="18" name="cross" />
    </div>
    <!--    弹窗分类面板-->
    <div class="box-border px-5">
      <NuxtLink
        external
        class="mb-1.5 flex items-center justify-between rounded-xl px-2 py-2 text-xs hover:bg-[#3b4142]"
        :class="{ 'bg-gradient-to-l from-[#3b4142]': item.id == curCategoryId }"
        v-for="(item, index) in subCategories"
        :to="$localePath(`/category/${curParentCategoryId}/${item.id}/1`)"
        :key="index">
        <!--         -->
        <div class="flex items-center w-full">
          <div class="flex items-center">
            <!--            <y-image-->
            <!--              width="25"-->
            <!--              class="w-6 h-6 mr-3 object-contain object-center"-->
            <!--              :src="$withPicOrigin(item.smallIcon)" />-->
            <w-image class="w-6 h-6 mr-3 object-contain object-center" :src="getCategoryIcon(item.id)" />
            <h4 class="text-sm lg:text-base uppercase">{{ item.categoryName }}</h4>
          </div>
          <span class="ml-auto text-gray text-xs">{{ item.goodsListCount }}</span>
        </div>
      </NuxtLink>
    </div>
  </div>
</template>

<script setup lang="ts">
import WImage from '~/components/logic/WImage.vue'
import { useRequest } from '~/composables/useRequest'
import YImage from '~/components/logic/YImage.vue'
import { useCategoryStore } from '~/store/category'

const { useAsset } = useCommonPlugin()
const emit = defineEmits(['close'])
const handleCloseDialog = () => {
  emit('close', false)
}
const { subCategories, curCategoryId, curParentCategoryId, categoryTree } = useCategoryStore()
const categories = categoryTree.map((item) => item.subCategories).flat(Infinity) || []
const getCategoryIcon = (id) => {
  return useAsset(`goods-icons/${categories.findIndex((item) => item.id === id) % 20}`)
}
</script>

<style lang="scss"></style>
